﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport"/>
    <meta name="msapplication-tap-highlight" content="no" />
    <title id='Description'>jQWidgets ButtonGroup - Mobile Example
    </title>
    <link rel="stylesheet" href="../styles/demo.css" type="text/css" />
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.windowsphone.css" type="text/css" />
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.blackberry.css" type="text/css" />
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.android.css" type="text/css" />
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.mobile.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="../simulator.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttongroup.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxinput.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var theme = prepareSimulator("buttongroupcontainer");
            $("#buttongroup").jqxButtonGroup({ theme: theme, width: '100%', orientation: "vertical", mode: 'radio' });
            $("#buttongroup").jqxButtonGroup('setSelection', 0);
            $("#buttongroup2").jqxButtonGroup({ theme: theme, width: '100%', height: 40, mode: 'radio' });
            $("#buttongroup2").jqxButtonGroup('setSelection', 0);
            $("#button").jqxButton({ theme: theme, enableHover: false,  width: '80%', height: 40 });
            $(".input").jqxInput({ theme: theme, width: '100%', height: 40 });
            initSimulator("buttongroupcontainer");
        });
    </script>
</head>
<body class='default'>
    <div id="demoContainer" class="device-mobile">
        <div id="container" class="device-mobile-container">
            <div id="buttongroupcontainer">
                <div style="margin-left: 15%; position: relative; top: 30px; width: 70%;">
                    <h2 style="text-align: center;">Search Cheap Flights</h2>
                    <div style="margin-top: 5px;" id="buttongroup">
                        <button value="Return">
                        </button>
                        <button value="One Way">
                        </button>
                        <button value="Multiple Cities">
                        </button>
                    </div>
                    <br />
                        <input placeholder="Departure city/airport" class="input" type="text" />
                    <br />
                        <input style="margin-top: 10px;" placeholder="Destination city/airport" class="input" type="password" />
                    <div style="margin-top: 20px; margin-bottom: 20px;" id="buttongroup2">
                        <button value="Travellers">
                        </button>
                        <button value="Economy">
                        </button>
                    </div>
                    <div>
                        <input type="button" value="Search" style="margin-left: 10%; margin-top: 10px;" id="button" />
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>
